<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3 数据相关知识点理解</title>
    <script src="https://cdn.bootcss.com/d3/5.15.1/d3.js"></script>
</head>

<body>
    <script>
        d3.select(document.body).append('p');
        d3.select(document.body).append('p');
        d3.select(document.body).append('p');

        var dataset = [3, 6, 9, 12, 15];
        var p = d3.select("body").selectAll("p");
        var update = p.data(dataset) //绑定数据,并得到update部分
        var enter = update.enter(); //得到enter部分
        //下面检验是否真的得到对于update的处理
        update.text(function (d, i) {
            return "更新模式中的数据: " + d + ",第: " + i;
        })
        //对于enter的处理
        //注意，这里需要先添加足够多的<p>，然后在添加文本
        var pEnter = enter.append("p") //添加足够多的<p>
        pEnter.text(function (d, i) {
            return "进入模式中的数据: " + d + ",第: " + i;
        })

        var dataset = [3];

        //选择body中的p元素
        var p = d3.select("body").selectAll("p");

        //获取update部分
        var update = p.data(dataset);

        //获取exit部分
        var exit = update.exit();

        //update部分的处理：更新属性值
        update.text(function (d) {
            return "update " + d;
        });

        //exit部分的处理：修改p元素的属性
        exit.text(function (d) {
            return "这些元素没有对应的数据";
        });

        //exit部分的处理通常是删除元素

        // exit.remove();
    </script>
</body>

</html>